<template>
	<view>
		<view class="nav-bgd bg-gradual-blue padding radius text-center shadow-blur">
			<view class="head-portrait cu-list menu-avatar">
				<view class="cu-style cu-item">
					<view class="cu-avatar round lg">
						<image src="../../static/images/pic13.png" mode="" class="head-img"></image>
					</view>
					<view class="content">
						<view class="tex-col text-grey">包图君</view>
						<view class="text-gray text-sm flex">
							<view class="tex-col1 text-cut">
								认证设计师
								<view class="iocs-min">
									<image src="../../static/images/pen.png" mode="" class="i-min"></image>
								</view>
							</view> 
							
						</view>
					</view>
					<view class="gift">
						<image src="../../static/images/gift.png" mode=""></image>
						签到有礼
					</view>
				</view>
			</view>
			<view class="integral flex">
				<view class="flex-twice">
					<view class="integral-text">
						3728
					</view>
					<view class="integral-text integral-p">
						积分
					</view>
				</view>
				<view class="flex-twice">
					<view class="integral-text">
						8
					</view>
					<view class="integral-text integral-p">
						优惠券
					</view>
				</view>
				<view class="flex-twice">
					<view class="integral-text">
						48
					</view>
					<view class="integral-text integral-p">
						红包
					</view>
				</view>
			</view>
		</view>
		<view class="release">
			<view class="release-box flex">
				<view class="release-box-box">
						<view>
							<image src="../../static/images/pic50.png" mode="" class="release-img"></image>
						</view>
						<view class="release-text">
							我的发布
						</view>
				</view>
				<view class="release-box-box">
						<view>
							<image src="../../static/images/pic55.png" mode="" class="release-img"></image>
						</view>
						<view class="release-text">
							草稿箱
						</view>
				</view>
				<view class="release-box-box">
						<view>
							<image src="../../static/images/pic60.png" mode="" class="release-img"></image>
						</view>
						<view class="release-text">
							收藏夹
						</view>
				</view>
				<view class="release-box-box">
						<view>
							<image src="../../static/images/pic.png" mode="" class="release-img"></image>
						</view>
						<view class="release-text">
							关注话题
						</view>
				</view>
			</view>	
		</view>
		<view class="shopping-cart bg-white">
			<view class="shopping-cart-box flex">
				<view class="shopping-cart-img">
					<image src="../../static/images/pic73.png" class="shopping-cart-img-img"></image>
				</view>
				<view class="shopping-cart-cont flex">
					<text class="shopping-cart-text">购物车</text>
					<view class="bubble-box">
						<view class='bubble-box-box cu-tag bg-red'>
							<text class='bubble-box-text'>44</text>
						</view>
						<text class="bubble-box-icon iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
			<view class="shopping-cart-box flex">
				<view class="shopping-cart-img">
					<image src="../../static/images/pic72.png" class="shopping-cart-img-img"></image>
				</view>
				<view class="shopping-cart-cont1 flex">
					<text class="shopping-cart-text">订单</text>
					<view class="bubble-box">
							<text class='bubble-box-text1'>查看全部订单</text>	
						<text class="bubble-box-icon iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
		</view>	
		<view class="shopping-cart bg-white">
			<view class="shopping-cart-box flex">
				<view class="shopping-cart-img">
					<image src="../../static/images/pic67.png" class="shopping-cart-img-img"></image>
				</view>
				<view class="shopping-cart-cont flex">
					<text class="shopping-cart-text">浏览记录</text>
					<view class="bubble-box">
						<text class="bubble-box-icon iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
			<view class="shopping-cart-box flex">
				<view class="shopping-cart-img">
					<image src="../../static/images/pic68.png" class="shopping-cart-img-img"></image>
				</view>
				<view class="shopping-cart-cont flex">
					<text class="shopping-cart-text">装修信息</text>
					<view class="bubble-box">
						<text class="bubble-box-icon iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
			<view class="shopping-cart-box flex">
				<view class="shopping-cart-img">
					<image src="../../static/images/pic70.png" class="shopping-cart-img-img"></image>
				</view>
				<view class="shopping-cart-cont flex">
					<text class="shopping-cart-text">设计师/品牌入驻</text>
					<view class="bubble-box">
						<text class="bubble-box-icon iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
			<view class="shopping-cart-box flex">
				<view class="shopping-cart-img">
					<image src="../../static/images/pic71.png" class="shopping-cart-img-img"></image>
				</view>
				<view class="shopping-cart-cont1 flex">
					<text class="shopping-cart-text">介绍给朋友</text>
					<view class="bubble-box">
							<text class='bubble-box-text1'>推荐有惊喜哦</text>	
						<text class="bubble-box-icon iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
		</view>	
		<view class="shopping-cart bg-white">
			<view class="shopping-cart-box flex">
				<view class="shopping-cart-img">
					<image src="../../static/images/pic76.png" class="shopping-cart-img-img"></image>
				</view>
				<view class="shopping-cart-cont1 flex">
					<text class="shopping-cart-text">专属客服</text>
					<view class="bubble-box">
							<text class='bubble-box-text1'>09：00-18：00</text>	
						<text class="bubble-box-icon iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.nav-bgd{
		width: 100%;
		height: 468upx !important;
		background:url(../../static/images/personal-bgd.png) !important;
		padding: 0 !important;
	}
	.head-portrait{
		padding-top:120upx;
	}
	.cu-style{
		background: none !important;
		border-bottom: none !important;
		position: relative;
	}
	.head-img{
		width: 100%;
		height: 100%;
		border-radius: 50%;
		vertical-align: top;
	}
	.tex-col {
		font-size: 38upx;
		color: #fff;
	}
	.tex-col1{
		font-size: 21upx;
		color: #fff;
		line-height: 22upx;
	}
	.iocs-min{
		width: 22upx;
		height: 22upx;
		background-color: #fff;
		border-radius: 50%;
		display: inline-block;
		margin-left: 12upx;
		>.i-min{
			width: 18upx;
			height: 18upx;
			vertical-align: top;
			padding-left: 4upx;
		}
	}
	.gift{
		width: 181upx;
		line-height: 60upx;
		background-color: #3670E5;
		text-align: left;
		border-radius: 30upx 0 0 30upx;
		position: absolute;
		right: 0;
		font-size: 24upx;
		>image{
			width: 28upx;
			height: 28upx;
			margin: 0 25upx 0 12upx;
			font-variant: top;
		}
	}
	.integral{
		margin-top: 30upx;
		>.flex-twice{
			width: 33.33%;
			>.integral-text{
				font-size: 28upx;
			}
			>.integral-p{
				margin-top: 24upx;
			}
		}
	}
	.release{
		width: 100%;
		height: 146upx;
		background-color: #fff;
		text-align: center;
		position: relative;
		>.release-box{
			width: 100%;
			height: 146upx;
			background-color: #fff;
			border-radius: 30upx 30upx 0 0;
			position: relative;
			top:-43upx;
			>.release-box-box{
				width: 25%;
				padding-top:43upx;
				.release-img{
					width: 46upx;
					height: 46upx;
					vertical-align: top;
				}
				.release-text{
					padding-top: 22upx;
					font-size: 23upx;
					color: #77797B;
				}
			}
		}
	}
	.shopping-cart{
		margin-top: 20upx;
		>.shopping-cart-box{
			>.shopping-cart-img{
				line-height: 108upx;
				padding-left: 32upx;
				>.shopping-cart-img-img{
					width: 41upx;
					height: 43upx;
					vertical-align: middle;
				}
				
			}
			>.shopping-cart-cont{
				width: 644upx;
				padding-left: 32upx;
				height: 108upx;
				line-height: 106upx;
				border-bottom: 2upx solid #F2F2F2;
				position: relative;
				>.shopping-cart-text{
					font-size: 30upx;
					color: #353535;
				}
				>.bubble-box{
					position: absolute;
					right: 0;
					>.bubble-box-box{
						width: 34upx;
						height: 34upx;
						border-radius: 50%;
						>.bubble-box-text{
							font-size: 22upx;
							line-height: 32upx;
						}
					}
					>.bubble-box-icon{
						margin-left: 33upx;
						font-size: 19upx;
						color: #DBDDE0;
					}
				}
			}
			>.shopping-cart-cont1{
				width: 644upx;
				padding-left: 32upx;
				height: 108upx;
				line-height: 108upx;
				position: relative;
				>.shopping-cart-text{
					font-size: 30upx;
					color: #353535;
				}
				>.bubble-box{
					position: absolute;
					right: 0;
					>.bubble-box-text1{
						font-size: 25upx;
						color: #B7B7B7;
					}
						
					>.bubble-box-icon{
						margin-left: 33upx;
						font-size: 19upx;
						color: #DBDDE0;
					}
				}
			}
		}
			
	
	}
	.cu-list.menu-avatar>.cu-item:after, .cu-list.menu>.cu-item:after{
		border: none !important;
	}
</style>
